<template>
  <!-- 标准规范管理（年初累计） -->
  <div class="schemeApproval">
  <a-spin :spinning="loading">
    <title-name title="标准规范管理（年初累计）" style="margin-top: 50px"></title-name>
    <div class="table-div">
      <h3 class="updateSummary-h3">标准规范管理（年初累计)</h3>
      <a-table class="takeOut-hover" :columns="columns" bordered :pagination="false" :data-source="tableData">
        <template v-for="col in columns" :slot="col.dataIndex" slot-scope="text, record,index">
            {{noValue(record[col.dataIndex],index,col.dataIndex)}}
          </template>
      </a-table>
      </div>
  </a-spin>
  </div>
</template>
<script>
import { summaryMixin } from "./mergeCell";
import {queryMonthTechnicalCanonicalManageList } from '@/api/technical/summary' // api
export default {
   mixins:[summaryMixin], //混入文件
  name: 'a' + Date.now(),
  props: {
    monthTechnicalId: {
      type: String,
      default() {
        return ''
      }
    },
    orgTreeObj:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data() {
    this.columns = [
        {
          title: '所属分公司',
          align: 'center',
          dataIndex: 'branchComId',
          width:'16%',
          customRender: (text, row, index) => {
          // this.$nextTick(() => {
          let rowSpan = 1
          if (index != 0 && text === this.tableData[index - 1].branchComId) {
            rowSpan = 0
            // 若不是，则往下合并与改行考核内容一致行的总行数
          } else {
            rowSpan = [...this.tableData].filter((i) => i.branchComId == text).length
          }
          return {
            children: row.branchCompany,
            attrs: {
              rowSpan: rowSpan,
            },
          }
          // })
        },
        },
        { title: '所属项目名称', align: 'center', dataIndex: 'projectName', width:'18%',
           customRender: (text, row, index) => {
              let rowSpan = 1
              if (
                  index != 0 &&
                  text === this.tableData[index - 1].projectName &&
                  row.branchCompany ===this.tableData[index - 1].branchCompany
              ) {
                  rowSpan = 0
                  // 若不是，则往下合并与改行考核内容一致行的总行数
              } else {
                  rowSpan = [...this.tableData].filter((i) => i.projectName == text && row.branchCompany === i.branchCompany).length
              }
              return {
                  children: text,
                  attrs: {
                  rowSpan: rowSpan,
                  },
              }
              // })
              },
      },
        { title: '图集号', dataIndex: 'atlasStandardNumber', align: 'center', width:'13%',},
        { title: '图集名称', dataIndex: 'atlasName', align: 'center',width:'11%',},
        { title: '类型', dataIndex: 'handleTypeStr', align: 'center',width:'9%',},
        { title: '标准类型', dataIndex: 'groupName', align: 'center',width:'11%',},
        { title: '发布日期', dataIndex: 'publishTime', align: 'center',width:'11%',},
        { title: '备注', dataIndex: 'remark', align: 'center',width:'11%', },
      ]
    return {
      tableData:[],
      loading:false
    }
  },
  watch:{
    monthTechnicalId: {
      handler(val) {
        this.queryMonthTechnicalCanonicalManageListFn(val,this.orgTreeObj);
      },
      immediate: true
    },
    orgTreeObj:{
      handler(newVal) {
		    this.queryMonthTechnicalCanonicalManageListFn(this.monthTechnicalId,newVal);
			},
			deep:true, // 深度监听
			//immediate:true, // 初始化监听
    }
  },
  methods: {
    queryMonthTechnicalCanonicalManageListFn(id,searchQuery){
      let obj = {
        monthTechnicalId:id,
        searchQuery,
      }
      this.loading = true;
      queryMonthTechnicalCanonicalManageList(obj).then((res)=>{
        this.loading = false;
        if(res.code == '0'){
          let data = res.data;
          this.tableData = data;
        }
      })
    }
  },
  mounted() {
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.schemeApproval{
.updateSummary-h3{
      line-height: 45px;
      width: 100%;
      text-align: center;
      background: rgb(244, 244, 244);
      border: 1px solid gainsboro;
      border-bottom: none;
      font-size: 14px;
      margin: 0;
  }
@{deep}.titleName{
  margin-top:10px!important;
}
.table-div{
  margin-bottom: 40px;
}
}
</style>
